import Head from 'next/head'
import { Row, Col, Affix, BackTop } from 'antd'
import Header from '../component/Header'
import MyList from '../component/MyList'
import Author from '../component/Author'
import Advert from '../component/Advert'
import Footer from '../component/Footer'
import Type from '../component/Type'
import Router from 'next/router'
import React, { useState } from 'react';
import { getTypeList, getListByType } from '../api/list'


const List = ({ typeList, ARTList }) => {

  const [articleList, setArticleList] = useState(ARTList)
  const [articleListTitle, setArticleListTitle] = useState("最火文章")
  const [loading, setLoading] = useState(false)

  const changeArticleType = async (id) => {
    setLoading(true)
    let newList = await getListByType(id)
    setLoading(false)
    setArticleList(newList.list)
    setArticleListTitle(newList.list[0].type || "")
  }

  const toDetail = (id) => {
    Router.push({
      pathname: "/detail",
      query: {
        id: id
      }
    })
  }

  return (
    <div className="container" >
      <Head>
        <title>老王的前端成长记录-博文</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header path="/list" />
      <Row className="common-main" type="flex" justify="center">
        <Col className="common-left" xs={24} sm={24} md={16} lg={14} xl={14}>
          <MyList
            data={articleList}
            title={articleListTitle}
            toDetail={toDetail}
            loading={loading} />
        </Col>
        <Col className="common-right" xs={0} sm={0} md={8} lg={6} xl={4}>
          <Author />
          <Affix offsetTop={50}>
            <Type data={typeList} changeType={changeArticleType} />
          </Affix>
          <Advert />
        </Col>
      </Row>
      <BackTop />
      <Row>
        <Footer />
      </Row>
    </div >
  )
}

List.getInitialProps = async (props) => {
  let typeId = 0
  if (!!props.query.type_id) {
    typeId = props.query.type_id
  }
  let typeList = await getTypeList()
  let ARTList = await getListByType(typeId)
  return {
    typeList: typeList.list,
    ARTList: ARTList.list
  }
}
export default List
